<template>
  <view class="Home">
    <view class="searchbox">
      <view class="searchcontent">
        <view class="iputbox" @click="openPolPopup">
          <uv-icon name="map-fill" :color="params.polPortCode ? '#1C78FE' :'#CFD4DB'" />
          <view class="inputtext">
            <uv-input v-model="params.polPortCode" readonly placeholder="请选择起运港" border="none"></uv-input>
          </view>
          <uv-icon name="arrow-right" color="#CFD4DB" />
        </view>
        <view class="iputbox" @click="openPodPopup">
          <uv-icon name="map-fill" :color="params.podPortCode ? '#1C78FE' :'#CFD4DB'" />
          <view class="inputtext">
            <uv-input v-model="params.podPortCode" readonly placeholder="请选择目的港" border="none"></uv-input>
          </view>
          <uv-icon name="arrow-right" color="#CFD4DB" />
        </view>
      </view>
      <view class="searchbtn">
        <uv-button type="primary" @click="onSearch">
          查运价
        </uv-button>
      </view>
      <view class="historysearch">
        <uv-icon name="eye-fill" color="#6F7F94" />
        <view class="historybox">
          <view class="historybox-item" v-for="item in historySearchList" @click="onHistorySearch(item)">
            {{item.polPortCode}}-{{item.podPortCode}}
          </view>
        </view>
      </view>
    </view>
    <!-- 推荐运价 -->
    <view class="recommendbox">
      <view class="recommendtop">
        <view class="alltj" @click="goRecommendList">全部推荐></view>
        <image class="recommendimg" mode="widthFix" src="@/static/freightHome/recommend.png"></image>
      </view>
      <view class="recommendtab">
        <view @click="changeLine(item.LineId)" class="recommendtab-item" v-for="item in lineList" :key="item.LineId"
          :class="lineId==item.LineId?'recommendtab-item-active':''">
          {{item.LineName}}
        </view>
      </view>
      <view class="recommendcontent">
        <view class="recommendcontent-item" v-for="item in recommendList" :key="item.Id" @click="goFreightInfo(item)">
          <view class="recommend-item-top">{{item.PolEnPortName}} - {{item.DestEnPortName}}</view>
          <view class="recommend-item-down">
            <view class="recommend-item-down-left">{{item.FormatDate}} {{item.week}}</view>
            <view class="recommend-item-down-right">
              <text>${{!item.IsShow ? item.MinPrice : '****'}}</text>
              起
            </view>
          </view>
        </view>
      </view>
      <view class="seemore" @click="goRecommendList">查看更多></view>
    </view>
    <appSelectPodport v-model="podVisible" @change="changePodPort"></appSelectPodport>
    <appSelectPolport v-model="polVisible" @change="changePolPort"></appSelectPolport>
  </view>
</template>

<script>
	import request from '@/utils/request'
	import {
		formatDateText,
		formatDateWeek,
		formatDateMMDD
	} from '@/utils/times.js'
	import customRouter from '@/utils/customRouter.js'
	import appSelectPolport from '@/pages/components/app-select-polport/app-select-polport.vue'
	import appSelectPodport from '@/pages/components/app-select-podport/app-select-podport.vue'
	import {getStorage,setStorage} from '@/utils/storage'
	import {formatPrice} from '@/utils/price'
	export default {
		components: {
			appSelectPodport,
			appSelectPolport
		},
		data() {
			return {
				historySearchList:[],
				recommendList: [],
				lineList: [],
				lineId: -1,
				podVisible: false,
				polVisible:false,
				params: {
					podPortCode: "",
					podPortId: -1,
					polPortCode: "",
					polPortId: -1,
				}
			};
		},
		methods: {
			openPodPopup(){
				this.podVisible=true
			},
			openPolPopup(){
				this.polVisible=true
			},
			getRecommendList() {
				const req = {
					Page: 1,
					limit: 8,
					LineId: this.lineId,
					IsRelease: 1,
					IsRecommend: 1
				}
				request.get("/api/FRPortalRate/GetRecommendRateList", req).then(res => {
					res.Rows.forEach(item => {
						item.week = formatDateWeek(item.StartTime);
						item.FormatDate = formatDateText(item.StartTime).slice(5, 11);
						item.MinPrice = item.OutPrice20GP ? item.OutPrice20GP : item.OutPrice40GP ? item.OutPrice40GP : item
							.OutPrice40HQ ? item.OutPrice40HQ : item.OutPrice45HQ ? item.OutPrice45HQ : item
							.OutPrice40NOR ? item.OutPrice40NOR : '-';
						item.CSTDate = this.getWeek(item.CSTDate);
						item.ETDDate = this.getWeek(item.ETDDate);
						item.LineType = item.LineType == 0 ? '直达' : `中转 ${item.PodEnPortName}`;
						item.StartTime = formatDateMMDD(item.StartTime);
						item.EndTime = formatDateMMDD(item.EndTime);
						/*接入运价加价规则 */
						item.AllOutPrice20GP = item.Price20GP != null ? item.Price20GP : item
							.AllOutPrice20GP
						item.AllOutPrice40GP = item.Price40GP != null ? item.Price40GP : item
							.AllOutPrice40GP
						item.AllOutPrice40HQ = item.Price40HQ != null ? item.Price40HQ : item
							.AllOutPrice40HQ
						item.AllInPrice20GP = item.Price20GP != null ? item.Price20GP : item.AllInPrice20GP
						item.AllInPrice40GP = item.Price40GP != null ? item.Price40GP : item.AllInPrice40GP
						item.AllInPrice40HQ = item.Price40HQ != null ? item.Price40HQ : item.AllInPrice40HQ
						item.AllPrice20GP = item.Price20GP != null ? item.Price20GP : item.AllPrice20GP
						item.AllPrice40GP = item.Price40GP != null ? item.Price40GP : item.AllPrice40GP
						item.AllPrice40HQ = item.Price40HQ != null ? item.Price40HQ : item.AllPrice40HQ
						/*添加货币类型 */
						item.AllOutPrice20GP = formatPrice(item.AllOutPrice20GP)
						item.AllOutPrice40GP = formatPrice(item.AllOutPrice40GP)
						item.AllOutPrice40HQ = formatPrice(item.AllOutPrice40HQ)
						item.AllInPrice20GP = formatPrice(item.AllInPrice20GP)
						item.AllInPrice40GP = formatPrice(item.AllInPrice40GP)
						item.AllInPrice40HQ = formatPrice(item.AllInPrice40HQ)
						item.AllPrice20GP = formatPrice(item.AllPrice20GP)
						item.AllPrice40GP = formatPrice(item.AllPrice40GP)
						item.AllPrice40HQ = formatPrice(item.AllPrice40HQ)
						/* 单票确认判断 */
						if (item.IsShow) {
							item.AllOutPrice20GP = '*该运价需要单票确认';
							item.AllOutPrice40GP = '*该运价需要单票确认';
							item.AllOutPrice40HQ = '*该运价需要单票确认';
							item.AllInPrice20GP = '*该运价需要单票确认';
							item.AllInPrice40GP = '*该运价需要单票确认';
							item.AllInPrice40HQ = '*该运价需要单票确认';
							item.AllPrice20GP = '*该运价需要单票确认';
							item.AllPrice40GP = '*该运价需要单票确认';
							item.AllPrice40HQ = '*该运价需要单票确认';
						}
						item.remake = item.SpecialRemark && item.WeightRemark ? item.SpecialRemark && item
							.WeightRemark : '-';
					})
					this.recommendList = res.Rows
				})
			},
			getLineList() {
				request.get("/api/FRPortalRate/GetLine").then(res => {
					this.lineList = res
					this.lineId = res[0].LineId
					this.getRecommendList();
				})
			},
			changeLine(Id) {
				this.lineId = Id;
				this.getRecommendList()
			},
			changePodPort(item) {
				if(!item) return
				this.params.podPortCode=item.EnPortName
				this.params.podPortId=item.Id
			},
			changePolPort(item){
				if(!item) return
				this.params.polPortCode=item.EnPortName
				this.params.polPortId=item.Id
			},
			goRecommendList(){
				customRouter.navigateTo({
					url:'/freightPackages/recommendList/recommendList'
				})
			},
			goSearchList(){
				customRouter.navigateTo({
					url:`/freightPackages/searchList/searchList?PolPortId=${this.params.polPortId}&DestPortId=${this.params.podPortId}&PolPortCode=${this.params.polPortCode}&DestPortCode=${this.params.podPortCode}`
				})
			},
			onSearch(){
				if(this.params.polPortId==-1||this.params.podPortId==-1) return uni.showToast({
						title:'请选择起运港和目的港',
						icon:'none'
					})
				this.setHistoryList()
				this.getHistoryList()
				this.goSearchList()
			},
			onHistorySearch(item){
				for(let key in this.params){
					this.params[key]=item[key]||''
				}
				this.goSearchList()
			},
			getHistoryList(){
				const data = getStorage('freight_history_search')
				this.historySearchList = data ? data : []
			},
			setHistoryList(){
				const originData = getStorage('freight_history_search')
				if (originData.length == 0) {
					setStorage('freight_history_search', [this.params])
				} else {
					const mergerData = [...originData, this.params]
					const newData = this.unquie(mergerData)
					setStorage('freight_history_search', newData)
				}
			},
			unquie(data) {
				const copyData = JSON.parse(JSON.stringify(data))
				for (let i = 0; i < copyData.length; i++) {
					for (let j = i + 1; j < copyData.length; j++) {
						if (copyData[i].polPortCode == copyData[j].polPortCode && copyData[i].podPortCode == copyData[j].podPortCode) {
							copyData.splice(j, 1)
							j--
						}
					}
				}
				return copyData
			},
			goFreightInfo(item){
				customRouter.navigateTo({
					url:`/freightPackages/freightInfo/freightInfo?info=${JSON.stringify(item)}`
				})
			},
			getWeek(i) {
				let text;
				switch (i) {
					case 1:
						text = '周一'
					case 2:
						text = '周二'
					case 3:
						text = '周三'
					case 4:
						text = '周四'
					case 5:
						text = '周五'
					case 6:
						text = '周六'
					case 7:
						text = '周日'
				}
				return text
			}
		},
		created() {
			this.getLineList()
			this.getHistoryList()
		}
	}
</script>

<style lang="scss" scoped>
@import './freightHome.css'
</style>